<template>
    <div>
        <div class="header">

            <div>
                {{wangpanFile.name}}
            </div>
            <div>
                {{wangpanFile.createTime}}
            </div>
            <div>
                <el-button type="primary" @click="downloadFile">下载</el-button>
            </div>
            <div>
                <div class="qrcode">
                    <div id="qrcode_div"></div>
                </div>
            </div>
        </div>



        <hr>

        <priview  :type="type" :name="wangpanFile.name" :url="url"></priview>


    </div>




</template>

<script>

    import QRcode from 'qrcodejs2'
    import priview from './priview'

    import {getQueryString} from "@/assets/js/util.js"
    export default {
        name: "detail",
        components:{
            priview
        },
        mounted(){
            var qrcode_div = document.getElementById("qrcode_div")
            qrcode_div.innerHTML = "";

            //创建图片，插入id为qrcode的div元素中
            var div = document.createElement('div');
            div.id = 'qrCodeIco';
            var img = document.createElement('img');
            img.id = 'qrCodeImg';
            img.src = require("@/assets/logo.png");
            //将img插入到div
            div.appendChild(img);
            qrcode_div.appendChild(div);
            var qrcode = new QRcode(qrcode_div, {
                width : 200,
                height : 200
            });
            qrcode.makeCode(location.href);
        },
        data(){
            return {
                id:"",
                wangpanFile:{},
                type:"",
                url:"",

            }
        },
        watch:{
        },
        methods:{
            downloadFile(){
                window.open(this.url)
            },
            initData(){
                this.axios.post("/wangpanfile/wangpan-file/findById?id="+this.id).then(res=>{
                    this.wangpanFile = res.data;
                    this.url = "http://192.168.0.112:10010/wangpanfile/file/"+this.wangpanFile.url;
                    let suffix = this.wangpanFile.suffix;
                    if(suffix=="png"||suffix=="jpg"){
                        this.type = "img";
                    }else if(suffix=="mp3"){
                        this.type = "audio";
                    }else if(suffix=="mp4"){
                        this.type = "video";
                    }else if(suffix=="txt"){
                        this.type = "txt";
                        this.url = "http://192.168.0.112:10010/wangpanfile/wangpan-file/readtxt?name="+this.wangpanFile.url;
                    }else{
                        this.type = "other";
                    }

                })
            }

        },
        created(){
            this.id = getQueryString("id");
            this.initData()
        }
    }
</script>

<style>
    .header{
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }
    .qrcode{
        border-radius: 10px;
        background: #f7f7f7;
        width: 200px;
        padding: 10px;
    }
    #qrCodeIco {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: #fff;
        padding: 2px;
        border-radius: 5px;
    }
    #qrCodeImg {
        width: 100%;
        height: 100%;
    }
    #qrcode_div{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
</style>
